<template>
  <a-modal
    title="文件上传"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="720px"
    style="overflow: hidden;"
    :bodyStyle="{ maxHeight: '520px', overflow: 'auto' }"
  >
    <div id="pupVal" contenteditable></div>
    <div>
      <a data-chevereto-pup-trigger data-target="#pupVal">上传文件</a>
    </div>
    <span style="color:red;">上传完成后复制链接，粘贴至图片链接文本即可。</span>
  </a-modal>
</template>

<script>
export default {
  components: {},
  props: [],
  data () {
    return {
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {},
      formData: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {},
  methods: {
    showModal () {
      this.visible = true
      const script = document.getElementById('pupJs')
      console.log(script)
      if (script) {
        script.parentNode.removeChild(script)
      }
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.id = 'pupJs'
      s.src = 'https://cdn.jsdelivr.net/gh/itvita/liuqiang@master/pup/pup.js'
      s.setAttribute('data-url', 'https://img.wenhairu.com/upload')
      s.setAttribute('async', 'true')
      s.setAttribute('data-mode', 'manual')
      s.setAttribute('data-auto-insert', 'direct-links')
      // s.setAttribute('data-palette', 'clear')
      // s.setAttribute('data-sibling', '#popUpload')
      // s.setAttribute('data-sibling-pos', 'before')
      document.getElementsByTagName('head')[0].appendChild(s)
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.hideModal()
    },
    onReset () {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
